<template>
    <div style="padding-left:5px;">
        <el-row>
            <el-col align="left">
<!--                circle1Path：{{circle1Path}}-->
                <el-form label-width="120px">
<!--                    <el-form-item label="半径：">-->
<!--                        <el-input-number v-model="radius" :min="10" :max="150" :step="1" @change="changeRadius"></el-input-number>米-->
<!--                    </el-form-item>-->
                    <el-form-item label="跑道周长：">
<!--                        {{parseInt(distance)}}米-->
                        <el-input-number v-model="distance" :min="10" :max="3000" :step="100" @change="changeDistance"></el-input-number>米
                    </el-form-item>
                    <el-form-item label="甲(绿色)速度：">
                        <el-input-number v-model="v1" :min="0" :max="9999" :step="10" @change="goHome"></el-input-number>米/秒
                    </el-form-item>
                    <el-form-item label="乙(红色)速度：">
                        <el-input-number v-model="v2" :min="0" :max="9999"  :step="10" @change="goHome"></el-input-number>米/秒
                    </el-form-item>
                    <el-form-item label="甲乙起点相距：">
                        <el-input-number v-model="initDistance1Passed" :min="0" :max="distance - 1"  :step="10" @change="goHome"></el-input-number>米
                    </el-form-item>
                    <el-form-item label="模式：">
                        <el-radio-group v-model="mode" @change="goHome">
                            <el-radio label="meet">相遇</el-radio>
                            <el-radio label="pursuit">追赶</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="显示运动轨迹：">
                        <el-checkbox v-model="showPath"></el-checkbox>
                    </el-form-item>
                    <el-form-item >
                        <span slot="label">
                            {{modeDesc}}几次停止：
                        </span>
                        <el-input-number v-model="stopMeetCircleCount" :min="1" :max="10" :step="1" @change="goHome"></el-input-number>次
                    </el-form-item>
                    <el-form-item label-width="0" style="padding-left: 10px;">
                        耗时：{{parseInt(timeDiff / 1000)}}秒
                        甲路程：{{parseInt(distance1Passed - initDistance1Passed)}}米
                        乙路程：{{parseInt(distance2Passed)}}米
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col align="left">
                <el-button type="primary" @click="goHome">回到起点</el-button>
                <el-button type="primary" @click="start">（重新）开始</el-button>
                <el-button type="primary" @click="pause" v-if="!stopped">{{paused ? '恢复' : '暂停'}}</el-button>
            </el-col>
        </el-row>
        <div style="padding-left:10px;">
<!--            distance:{{parseInt(distance)}} distance1Passed:{{parseInt(distance1Passed)}}  distance2Passed:{{parseInt(distance2Passed)}}-->
<!--            timeDiff:{{timeDiff}}-->
            <v-stage ref="stage" :config="stageSize" >
                <v-layer ref="layer">
                    <v-circle ref="circleMain" :config="{x: initX, y: initY, radius: radius, stroke: 'black'}"/>
                    <v-circle ref="circle1" :config="{x: x1, y: y1, radius: 5, stroke: 'green'}"/>
                    <v-circle ref="circle2" :config="{x: x2, y: y2, radius: 5, stroke: 'red'}"/>

                    <v-line v-if="showPath" :config="{
                        x: 0,
                        y: 0,
                        points: circle1Path,
                        stroke: 'green',
                        lineJoin: 'round',
                      }"/>

                    <v-line v-if="showPath" :config="{
                        x: 0,
                        y: 0,
                        points: circle2Path,
                        stroke: 'red',
                        lineJoin: 'round',
                      }"/>
                </v-layer>
            </v-stage>
        </div>
    </div>

</template>

<script>
    import Konva from "konva";
    const width = window.innerWidth - 50;
    const height = 400;

    export default {
        data() {
            return {
                timeDiff: 0,
                initX: 200,
                initY: 100,
                windowInnerWidth: 0,
                stageSize: {
                    width: width,
                    height: height
                },
                anim: null,
                mode: 'pursuit',
                showPath: true,
                // radius: 100,
                distance: 300,

                initDistance1Passed: 0,
                x1: 0,
                y1: 0,
                v1: 70,
                delta1: 40,
                distance1Passed: 0,
                circle1Path: [],
                x2: 0,
                y2: 0,
                v2: 40,
                delta2: 20,
                distance2Passed: 0,
                circle2Path: [],

                stopMeetCircleCount: 1,

                paused: false,
                stopped: true,
            };
        },
        methods: {
            changeDistance() {
                // this.x2 = this.realDistance
                this.initX = width / 2 //this.radius + 100
                this.initY = this.radius + 100
                this.stageSize.height = Math.max(this.radius * 6, 400)
                this.goHome()
            },
            start() {
                this.goHome()
                this.stopped = false
                this.anim.start();
            },
            pause() {
              this.paused = !this.paused
            },
            stop() {
                this.paused = false
                this.stopped = true
                if(this.anim) {
                    this.anim.stop()
                }
            },
            goHome() {
                this.circle1Path = []
                this.circle2Path = []
                this.stop()
                this.timeDiff = 0
                this.distance1Passed = this.initDistance1Passed
                this.distance2Passed = 0

                let angle1 = Math.PI + 2 * Math.PI * this.distance1Passed / this.distance
                let angle2 = Math.PI
                this.x1 = this.initX + (this.radius + this.delta1) * Math.cos(angle1)
                this.y1 = this.initY + (this.radius + this.delta1) * Math.sin(angle1)

                this.x2 = this.initX + (this.radius + this.delta2) * Math.cos(angle2)
                this.y2 = this.initY + (this.radius + this.delta2) * Math.sin(angle2)
            },
            changeSize(e) {
                // to() is a method of `Konva.Node` instances
                e.target.to({
                    scaleX: Math.random() + 0.8,
                    scaleY: Math.random() + 0.8,
                    duration: 0.2
                });
            },
            renderResize() {
                this.windowInnerWidth = window.innerWidth - 50;
                this.goHome()
            },
        },
        computed: {
            // distance() {
            //   return Math.PI * 2 * this.radius
            // },
            radius() {
              return this.distance / Math.PI / 2
            },
            realDistance() {
                // return Math.min(this.distance, this.windowInnerWidth - 50)
                return this.instance
            },
            modeDesc() {
                return this.mode == 'pursuit' ? '追赶' : '相遇'
            }
        },
        mounted() {
            this.windowInnerWidth = window.innerWidth
            const vm = this;
            window.addEventListener("resize", this.renderResize, false)

            // this.x2 = this.realDistance
            this.changeDistance()
            this.goHome()

            const circle1 = this.$refs.circle1.getNode();
            this.anim = new Konva.Animation(function(frame) {
                if(!vm.paused) {
                    // let timePassed = frame.time
                    // console.log('timePassed:', timePassed)
                    vm.timeDiff+= frame.timeDiff
                    // console.log('timeDiff:', vm.timeDiff)
                    let delta1 = vm.v1 * (frame.timeDiff / 1000);
                    let delta2 = vm.v2 * (frame.timeDiff / 1000);
                    vm.distance1Passed += delta1
                    vm.distance2Passed += delta2
                    let angle1 = Math.PI + 2 * Math.PI * vm.distance1Passed / vm.distance
                    let angle2 = Math.PI + 2 * Math.PI * vm.distance2Passed / vm.distance
                    vm.x1 = vm.initX + (vm.radius + vm.delta1) * Math.cos(angle1)
                    vm.y1 = vm.initY + (vm.radius + vm.delta1) * Math.sin(angle1)

                    let path1Delta = parseInt(vm.distance1Passed / vm.distance) * 5
                    let pathX1 = vm.initX + (vm.radius + path1Delta + vm.delta1) * Math.cos(angle1)
                    let pathY1 = vm.initY + (vm.radius + path1Delta + vm.delta1) * Math.sin(angle1)
                    vm.circle1Path.push(pathX1)
                    vm.circle1Path.push(pathY1)

                    let direction = vm.mode == 'pursuit' ? 1 : -1
                    vm.x2 = vm.initX + (vm.radius + vm.delta2) * Math.cos(angle2)
                    vm.y2 = vm.initY + (vm.radius + vm.delta2) * Math.sin(angle2) * direction

                    let path2Delta = parseInt(vm.distance2Passed / vm.distance) * 5
                    let pathX2 = vm.initX + (vm.radius + path2Delta + vm.delta2) * Math.cos(angle2)
                    let pathY2 = vm.initY + (vm.radius + path2Delta + vm.delta2) * Math.sin(angle2) * direction
                    vm.circle2Path.push(pathX2)
                    vm.circle2Path.push(pathY2)

                    let stopCondition
                    if(vm.mode == 'pursuit') {
                        stopCondition = Math.abs(vm.distance1Passed - vm.distance2Passed) >= vm.distance * vm.stopMeetCircleCount
                    } else {
                        stopCondition = Math.abs(vm.distance1Passed + vm.distance2Passed) >= vm.distance * vm.stopMeetCircleCount
                    }
                    // console.log('gap:', gap)
                    if(stopCondition) {
                        vm.stop()
                    }
                }
            }, circle1.getLayer());

        }
    };
</script>
